<template>
    <div class="usercenter">
        <div class="header">
            <div class="header_title">
                <div class="title_avatar">
                    <img :src="LoginUser.avatar" alt="">
                </div>
                <div class="title_content">
                    <div class="content_text">{{LoginUser.nickname}}</div>
                    <div class="content_sm">{{LoginUser.createtime}}</div>
                </div>
            </div>
            <div class="operate">
                <div class="text-sm">
                    <span class="text-bold">{{numlist.collect}}</span>
                    我的收藏
                </div>
                <div class="text-sm">
                    <span class="text-bold">{{numlist.money}}</span>
                    余额
                </div>
                <div class="text-sm">
                    <span class="text-bold">{{numlist.coupon}}</span>
                    优惠券数量
                </div>
                <div class="text-sm">
                    <span class="text-bold">{{numlist.order}}</span>
                    订单数量
                </div>
            </div>
        </div>
        <div class="userorder">
            <div class="order_project">
                <div class="item">
                    <router-link to="/order/index">
                        <div class="img">
                            <img src="/assets/images/order1.png" alt="">
                        </div>
                        待支付
                    </router-link>
                </div>
                <div class="item">
                    <router-link :to="{path:'/order/index', query:{status: '1'}}">
                        <div class="img">
                            <img src="/assets/images/order2.png" alt="">
                        </div>
                        待发货
                    </router-link>
                </div>
                <div class="item">
                    <router-link :to="{path:'/order/index', query:{status: '2'}}">
                        <div class="img">
                            <img src="/assets/images/order3.png" alt="">
                        </div>
                        待收货
                    </router-link>
                </div>
                <div class="item">
                    <router-link :to="{path:'/order/index', query:{status: '3'}}">
                        <div class="img">
                            <img src="/assets/images/order4.png" alt="">
                        </div>
                        待评价
                    </router-link>
                </div>
                <div class="item solid-left">
                    <router-link to="/order/index">
                        <div class="img">
                            <img src="/assets/images/returns.png" alt="">
                        </div>
                        退货/售后
                    </router-link>
                </div>
            </div>
        </div>
        <div class="userorder">
            <div class="order_project">
                <div class="item">
                    <router-link to="/retail/poster" class="item">
                        <div class="img"> <img src="/assets/images/retail1.png" alt=""></div>
                        分销信息
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/retail/retailmember" class="item">
                        <div class="img"> <img src="/assets/images/retail2.png" alt=""></div>
                        分销会员
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/retail/commission" class="item">
                        <div class="img"> <img src="/assets/images/retail3.png" alt=""></div>
                        分销佣金
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/mycoupon" class="item">
                        <div class="img"> <img src="/assets/images/coupon.png" alt=""></div>
                        优惠列表
                    </router-link>
                </div>
                <div class="item solid-left">
                    <router-link to="/business/recharge" class="item">
                        <div class="img"> <img src="/assets/images/recharge2.png" alt=""></div>
                        充值中心
                    </router-link>
                </div>
            </div>
        </div>
        <div class="usertool">
            <div class="list">
                <div class="item">
                    <router-link to="/business/profile">
                        <div class="img">
                            <img src="/assets/images/profile.png" alt="">
                        </div>
                        基本资料
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/team/order">
                        <div class="img"> <img src="/assets/images/pingtuan.png" alt=""></div>
                        拼团订单
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/address/index">
                        <div class="img"> <img src="/assets/images/address.png" alt=""></div>
                        收货地址
                    </router-link>
                </div>
                <div class="item">
                    <a @click="auth" v-if="isAuth">
                        <div class="img"> <img src="/assets/images/email.png" alt=""></div>
                        邮箱认证
                    </a>
                    <router-link to="/business/email" v-if="!isAuth">
                        <div class="img"> <img src="/assets/images/email.png" alt=""></div>
                        邮箱认证
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/record">
                        <div class="img"> <img src="/assets/images/consume.png" alt=""></div>
                        消费记录
                    </router-link>
                </div>
                <div class="item">
                    <router-link to="/business/chargerecord">
                        <div class="img"> <img src="/assets/images/recharge1.png" alt=""></div>
                        充值记录
                    </router-link>
                </div>
                <div class="item">
                    <a @click="logout">
                        <div class="img"> <van-icon name="clear" color="#ee0a24" /></div>
                        退出登陆
                    </a>
                </div>
            </div>
        </div>
        <div class="usertool">
            <ul class="proul">
                <li v-for="(item,index) in productlist" :key="index">
                    <a href="detail.html"><img id="img" :src="item.thumbs_text" /></a>
                    <a href="detail.html">
                        <p class="tit">{{item.name}}</p>
                    </a>
                    <div class="price">
                        <p>￥{{item.price}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="h54"></div>
        <div class="clear"></div>
    </div>
    <Footer />
</template>
<script setup>
import Footer from '@/components/common/footer.vue'
import { showDialog } from 'vant'

// proxy 是一个指向当前Vue实例的代理对象
// 通过它可以访问到Vue实例的所有公共属性和方法
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const productlist = ref([]);
const numlist = ref([]);

const isAuth = ref(false);
if (LoginUser.auth == '1') {
  isAuth.value = true;
} else {
  isAuth.value = false;
}

// 退出登录
const logout = () => {
  showConfirmDialog({
    title: '退出',
    message:
      '确认是否退出登陆?',
  })
    .then(() => {
      // 清除cookies用户信息
      proxy.$cookies.remove("LoginUser");
      proxy.$router.push('/business/login')
    })
    .catch(() => { });
}

// 邮箱已认证提示
const auth = () => {
  showDialog({
    title: '邮箱已认证',
    message: '您的邮箱已认证,无需重复认证',
  })
}

// 挂载前加载出数据
onBeforeMount(() => {
  getProductData()
  getNums()
})
// 商品列表
const getProductData = async () => {
  let result = await Api.product()
  if (result.code == 1) {
    productlist.value = result.data;
  }
}
// 统计数量
const getNums = async () => {
  let result = await Api.BusNums({ busid: LoginUser.id })
  if (result.code == 1) {
    numlist.value = result.data;
    console.log(numlist.value);
  }
}

</script>

<style scoped>
@import url("/assets/css/my.css");
#img {
  height: 20vh;
}
</style>